{% extends "profile.html" %}

{% block app %}
<div class="container mt30">
    <div id="watcher-fans-main-content" style="position: relative;float: left;width: 680px;">
    	{% include "watcher_fans_list.html" %}
    </div>
    <div style="position: relative;float: right;width: 280px;">
    	<div style="padding: 0px 0px 0px 10px;">
			<div style="border: 1px solid #cccccc; min-height: 200px;background: #ffffff;">
	    		<div class="header">
	    			共同关注 <span style="color: #999999;">({{ common_watcher_num }})</span>
	    		</div>
	    		<div style="padding: 0 5px;margin-bottom: 20px;">
	    			{% if not common_watcher_list %}
	    			<div style="margin-top: 40px;text-align: center;font-size: 12px;color: #999999;">
		    			无共同关注
	    			</div>
	    			{% else %}
	    			<table class="table-border-default-padding">
	    				{% set rows_num = ( int( len( common_watcher_list ) / 4 ) + ( 1 if len( common_watcher_list ) % 4 else 0 ) ) %}
	    				{% for row in xrange( rows_num ) %}
	    				<tr>
	    					{% for column in range( 4 ) %}
		    					{% if 4*row + column < len( common_watcher_list ) %}
		    					<td width="65px" align="center">
		    						<div >
		    							<img src="{{ handler.get_avatar( common_watcher_list[4*row+column]['_id'], 'thumbnail50x50' ) }}" class="avatar">
		    						</div>
		    						<div>
		    							<small><a href="/profile/{{ common_watcher_list[4*row+column]['_id'] }}" data-userid="{{ common_watcher_list[4*row+column]['_id'] }}">{{ common_watcher_list[4*row+column]['name'][:4] }}
		    								{% if len(common_watcher_list[4*row+column]['name']) > 4 %}...{% end %}</a></small>
		    						</div>
		    					</td>
		    					{% end %}
	    					{% end %}
	    				</tr>
	    				{% end %}
	    			</table>
	    			{% end %}
	    		</div>
	    		{% if common_watcher_num > 12 %}
	    		<div style="position: absolute ; bottom: 10px;right: 20px;" style="margin">
    				<small><a href="javascript:void(0)" id="get-more-common-watcher-fans-button" data-user-type="watcher" data-extra-userid="{{ user['_id'] }}" >更多>></a></small>
    			</div>
    			{% end %}
	    	</div>

	    	<div style="border: 1px solid #cccccc; min-height: 200px;background: #ffffff;margin-top: 20px;">
	    		<div class="header">
	    			共同粉丝 <span style="color: #999999;">({{ common_fans_num }})</span>
	    		</div>
	    		<div style="padding: 0 5px;margin-bottom: 20px;">
	    			{% if not common_fans_list %}
	    			<div style="margin-top: 40px;text-align: center;font-size: 12px;color: #999999;">
		    			无共同粉丝
	    			</div>
	    			{% else %}
	    			<table class="table-border-default-padding">
	    				{% set rows_num = ( int( len( common_fans_list ) / 4 ) + ( 1 if len( common_fans_list ) % 4 else 0 ) ) %}
	    				{% for row in xrange( rows_num ) %}
	    				<tr>
	    					{% for column in range( 4 ) %}
		    					{% if 4*row + column < len( common_fans_list ) %}
		    					<td width="65px" align="center">
		    						<div >
		    							<img src="{{ handler.get_avatar( common_fans_list[4*row+column]['_id'], 'thumbnail50x50' ) }}" class="avatar">
		    						</div>
		    						<div>
		    							<small><a href="/profile/{{ common_fans_list[4*row+column]['_id'] }}" data-userid="{{ common_fans_list[4*row+column]['_id'] }}">{{ common_fans_list[4*row+column]['name'][:4] }}
		    								{% if len(common_fans_list[4*row+column]['name']) > 4 %}...{% end %}</a></small>
		    						</div>
		    					</td>
		    					{% end %}
	    					{% end %}
	    				</tr>
	    				{% end %}
	    			</table>
	    			{% end %}
	    		</div>
	    		{% if common_fans_num > 12 %}
	    		<div style="position: absolute ; bottom: 10px;right: 20px;" style="margin">
    				<small><a href="javascript:void(0)" id="get-more-common-watcher-fans-button" data-user-type="fans" data-extra-userid="{{ user['_id'] }}" >更多>></a></small>
    			</div>
    			{% end %}
	    	</div>
    	</div>
    </div>
</div>
{% end %}
